<template>
  <div class="home">
    <div class="home-nav" v-if="selected !== 'index'">
      <div
        :class="{ 'home-nav-title': true, 'home-nav-item_selected': selected === 'introduct' }"
        @click="routeJump('introduct')"
      >
        组件总览
      </div>
      <div class="home-nav-group" v-for="item in navArrays" :key="item.group">
        <span class="home-nav-group-name">{{ item.group }}</span>
        <div
          class="home-nav-item"
          :class="{ 'home-nav-item': true, 'home-nav-item_selected': selected === $item.component }"
          v-for="$item in item.components"
          :key="$item.title"
          @click="routeJump($item.component)"
        >
          <span class="home-nav-item-title">{{ $item.component }}</span>
          <span class="home-nav-item-component">{{ $item.title }}</span>
        </div>
      </div>
    </div>
    <router-view class="home-content"></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { navArray } from './document/homeNav'

export default defineComponent({
  name: 'App',
  setup() {
    const router = useRouter()
    const selected = ref<string>('')
    const navArrays = reactive(navArray)
    watch(
      () => router.currentRoute.value,
      (n) => {
        selected.value = n.path.slice(1)
      }
    )
    function routeJump(path: string) {
      selected.value = path
      router.push(path)
    }
    return {
      selected,
      navArrays,
      routeJump,
    }
  },
})
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: flex;
  &-nav {
    width: 270px;
    height: 100%;
    overflow-y: auto;
    flex: 0 0 auto;
    padding-top: 20px;
    color: rgba(0, 0, 0, 0.65);
    border-right: 1px solid rgba(#dedede, 1);
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif, '宋体';
    &-title {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      cursor: pointer;
      padding-left: 40px;
      &:hover {
        color: #1890ff;
      }
    }
    &-group {
      display: flex;
      flex-direction: column;
      border-bottom: #f0f5f1;
      &-name {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding-left: 40px;
        border-bottom: 1px solid rgba(#dedede, 1);
        color: rgba(0, 0, 0, 0.45);
      }
    }
    &-item {
      width: 100%;
      height: 40px;
      cursor: pointer;
      line-height: 40px;
      padding-left: 40px;
      box-sizing: border-box;
      &:hover {
        color: #1890ff;
      }
      &_selected {
        color: #1890ff;
        background-color: #e6f7ff;
        border-right: 3px solid #1890ff;
      }
      &-title {
        line-height: 40px;
        font-size: 14px;
        margin-right: 8px;
      }
      &-component {
        line-height: 40px;
        font-size: 12px;
      }
    }
  }
  &-content {
    flex: 1 1 auto;
    overflow-y: auto;
  }
}
</style>
